<template>
  <div class="avue-crud-menus">
    <template v-for="(btn, index) in btnArray">
      <template v-if="btn.permission">
        <el-button
          :key="index"
          slot="reference"
          v-permission="btn.permission"
          class="filter-item"
          size="mini"
          :type="buttonType(btn)"
          :icon="getIcon(btn)"
          @click="handleClick(btn)"
        >
          {{ buttonName(btn) }}
        </el-button>
      </template>
      <template v-else>
        <el-button
          :key="index"
          class="filter-item"
          size="mini"
          :type="buttonType(btn)"
          :icon="getIcon(btn)"
          @click="handleClick(btn)"
        >{{ buttonName(btn) }}</el-button>
      </template>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    /**
     *{
     * name         按钮名称
     * type         按钮类型(必填项,add、edit、delete、download)
     * position     按钮位置(0-全部,1-top,2-right,默认0)
     * buttonType   按钮样式
     * permission   按钮权限(['admin','user:add'])
     * handleClick  点击事件处理
     * params       点击事件参数
     * selections   edit、delete选项
     *}
     */
    permissions: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      buttonTypes: {
        'add': 'primary',
        'edit': 'success',
        'delete': 'danger',
        'download': 'warning'
      },
      buttonNames: {
        'add': '新增',
        'edit': '修改',
        'delete': '删除',
        'download': '导出'
      }
    }
  },
  computed: {
    btnArray() {
      return this.permissions.filter(item => {
        return !item.position || item.position === 1
      })
    }
  },
  methods: {
    buttonType(btn) {
      const buttonType = btn.buttonType
      const type = btn.type
      if (!buttonType) {
        return this.buttonTypes[type]
      }
      return buttonType
    },
    getIcon(btn) {
      let res = 'el-icon-plus'
      if (btn.type === 'edit') {
        res = 'el-icon-edit'
      } else if (btn.type === 'delete') {
        res = 'el-icon-delete'
      } else if (btn.type === 'download') {
        res = 'el-icon-download'
      }
      return res
    },
    buttonName(btn) {
      const name = btn.name
      const type = btn.type
      if (!name) {
        return this.buttonNames[type]
      }
      return name
    },
    handleClick(btn) {
      const handleClick = btn.handleClick
      let handleFun = null
      let target = this
      let params = []

      if (handleClick) {
        handleFun = this._getHandleClick(this.$parent, handleClick)
        if (handleFun) {
          params = btn.params || []
          target = handleFun[1]
          handleFun = handleFun[0]
        } else {
          throw new Error("............. can't find: " + handleClick)
        }
      } else {
        throw new Error('............. handleClick is empty')
      }

      handleFun.apply(target, params)
    },
    _getHandleClick(node, handleClick) {
      if (node[handleClick]) {
        return [node[handleClick], node]
      } else if (node.$parent) {
        return this._getHandleClick(node.$parent, handleClick)
      } else {
        return null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.avue-crud-menus {
  align-items: center;
  padding: 6px 0;
  display: flex;
}
</style>
